<template>
  <view class="content">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <view class="collection-container">
        <block v-for="(item, index) in dataList" :key="index">
          <view class="collection-item"  @click="$goPath(2, `/pages/premiumBag/goods/goodsDetail?productId=${item.productUpId}`)">
            <view class="collection-item-imgs">
              <image :src="item.thumbnail" mode="aspectFill" />
            </view>
            <view class="collection-item-body">
              <view class="collection-item__upper">
                <view class="collection-item__title">
                  {{ item.name }}
                </view>
              </view>
              <view class="collection-item__down">
                <view>￥<text>{{
                  item.showPrice ? item.showPrice :
                  '----' }}</text></view>
                <view class="collection-item__down_icon" @click.stop="onIconDelete(item.productUpId)">
                  <u-icon name="trash" size="40rpx" />
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
    </z-paging>
    <u-modal :show="showWarnConfirm" showCancelButton title="是否删除收藏？" @cancel="showWarnConfirm = false"
      @confirm="confirm"></u-modal>
  </view>
</template>
<script>
import { getUserInfo } from '@/common/auth';

export default {
  data() {
    return {
      userId: getUserInfo().ypdUser?.userId,

      showWarnConfirm: false,
      colletList: [],
      current: 1,
      size: 20,
      total: 0,
      productUpId: '',
      dataList: []
    }
  },
  onLoad(options) {
  },
  methods: {
    //下拉加载
    async queryList(pageNo, pageSize) {
      const { userId } = this;
      const param = {
        page: { current: pageNo, size: pageSize },
        query: { userId }
      }
      let result = await this.$request.miniMyCollet(param)
      this.$refs.paging.complete(result.data.records);
    },

    onIconDelete(productUpId) {
      this.productUpId = productUpId
      this.showWarnConfirm = true
    },
    confirm() {
      const { productUpId, userId } = this;
      const param = {
        productUpId,
        userId
      }
      this.$request.miniCancelCollet(param).then(res => {
        if (res.code == 200) {
          this.$refs.paging.reload()
          this.$toast('取消收藏成功!')
          this.showWarnConfirm = false
        }
      });
    },
  },
}
</script>
<style scoped>
page {
  background-color: #F6F6F6;
}

.collection-container {
  width: 100%;
  background-color: #F6F6F6;
  padding: 24rpx;
  box-sizing: border-box;
  padding-bottom: calc(env(safe-area-inset-bottom));
}

.collection-item {
  width: 100%;
  height: 200rpx;
  background-color: #fff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
}

.collection-item-imgs {
  flex-shrink: 0;
  width: 200rpx;
  height: 200rpx;
}

.collection-item-imgs:empty {
  display: none;
  margin: 0;
}

.collection-item-imgs image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8rpx 8rpx !important;
  overflow: hidden;
}

.collection-item-body {
  height: 100%;
  flex: 1;
  display: flex;
  border-radius: 0 0 16rpx 16rpx;
  padding: 10rpx 24rpx;
  flex-direction: column;
  justify-content: space-between;
}

.collection-item__upper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.collection-item__title {
  flex-shrink: 0;
  font-size: 28rpx;
  color: #333;
  font-weight: 400;
  display: -webkit-box;
  /* height: 72rpx; */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  line-height: 36rpx;
}

.collection-item__tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 8rpx 0 0 0;
}

.collection-item__tag {
  color: #fa4126;
  background: transparent;
  font-size: 20rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  border: 1rpx solid #FF6F40;
  padding: 0 8rpx;
  border-radius: 4rpx;
  line-height: 30rpx;
  margin: 0 8rpx 8rpx 0;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  word-break: keep-all;
  text-overflow: ellipsis;
}

.collection-item__down {
  display: flex;
  justify-content: space-between;
  color: #EA5F5F;
  font-size: 28rpx;
}

.collection-item__down>view:last-child {
  display: flex;
  align-items: center;
}

.collection-item__down text {
  font-size: 40rpx;
}

.collection-item__down .collection-item__down_icon {
  color: #999999;
}

.t-dialog__body {
  color: #333 !important;
}

.t-button--text {
  color: #333 !important;
}

.t-button--text.t-button--primary {
  color: #32B499 !important;
}

.no-collection {
  width: 750rpx;
  padding-top: 30vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  color: #999999;
  font-size: 24rpx;
}
</style>